import React, { useEffect, useState } from "react";
import Home from "../../views/sandbox/home/Home.jsx";
import UserList from "../../views/sandbox/user-manage/UserList.jsx";
import RoleList from "../../views/sandbox/right-manage/RoleList.jsx";
import RightList from "../../views/sandbox/right-manage/RightList.jsx";
import NoPermission from "../../views/sandbox/nopermission/NoPermission.jsx";
import NewsAdd from "../../views/sandbox/news-manage/NewsAdd.jsx";
import NewsCategory from "../../views/sandbox/news-manage/NewsCategory.jsx";
import NewsDraft from "../../views/sandbox/news-manage/NewsDraft.jsx";
import NewsPreview from "../../views/sandbox/news-manage/NewsPreview.jsx";
import NewsUpdate from "../../views/sandbox/news-manage/NewsUpdate.jsx";
import Audit from "../../views/sandbox/audit-manage/Audit.jsx";
import AuditList from "../../views/sandbox/audit-manage/AuditList.jsx";
import Unpublished from "../../views/sandbox/publish-manage/Unpublished.jsx";
import Published from "../../views/sandbox/publish-manage/Published.jsx";
import Sunset from "../../views/sandbox/publish-manage/Sunset.jsx";
import { connect } from "react-redux";
import { Switch, Route, Redirect } from "react-router-dom";
import { Spin } from "antd";
import axios from "axios";
//路由映射表
const localRouterMap = {
  "/home": Home,
  "/user-manage/list": UserList,
  "/right-manage/role/list": RoleList,
  "/right-manage/right/list": RightList,
  "/news-manage/add": NewsAdd,
  "/news-manage/draft": NewsDraft,
  "/news-manage/category": NewsCategory,
  "/news-manage/preview/:id": NewsPreview,
  "/news-manage/update/:id": NewsUpdate,
  "/audit-manage/audit": Audit,
  "/audit-manage/list": AuditList,
  "/publish-manage/unpublished": Unpublished,
  "/publish-manage/published": Published,
  "/publish-manage/sunset": Sunset,
};
const NewsRouter = (props) => {
  const [BackRouteList, setBackRouteList] = useState([]);
  useEffect(() => {
    Promise.all([axios.get("/rights"), axios.get("/children")]).then((res) => {
      setBackRouteList([...res[0].data, ...res[1].data]);
      console.log([...res[0].data, ...res[1].data]);
    });
  }, []);
  //是否有路由权限的方法
  const checkRoute = (item) => {
    return (
      (localRouterMap[item.key] && item.pagepermisson) || item.routepermisson
    );
  };
  const checkUserPermission = (item) => {
    return true;
  };
  return (
    <Spin size="large" spinning={props.isLoading}>
      <Switch>
        {/* 动态创建路由 */}
        {BackRouteList.map((item) => {
          if (checkRoute(item) && checkUserPermission(item)) {
            return (
              <Route
                path={item.key}
                key={item.key}
                component={localRouterMap[item.key]}
                exact
              />
            );
          }
          return null;
        })}
        {/* 重定向,精确匹配这样只有输入/才会匹配到这 */}
        <Redirect from="" to="/home" exact />
        {BackRouteList.length > 0 && (
          <Route path="*" component={NoPermission} />
        )}
      </Switch>
    </Spin>
  );
};

const mapStateToProps = ({ LoadingReducer: { isLoading } }) => {
  return {
    isLoading,
  };
};
const mapDispatchTpProps = {
  changeCollapsed() {
    return {
      type: "change_loading",
    };
  },
};
export default connect(mapStateToProps, mapDispatchTpProps)(NewsRouter);
